<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>聊天</title>
</head>
<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<link
        href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css"
        rel="stylesheet"
/>
<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
<link href="cdn/all.css" media="screen" rel="stylesheet"/>
<link href="css/chat.css" media="screen" rel="stylesheet"/>
<script src="./js/star.js"></script>
<body>
<div id="app">
    <div class="chatcontainer">
        <el-container>
            <div class="main">
                <h1>{{friendname}}</h1>
                <div id="msgs">
                    <div>你们已经成功添加为好友,现在可以开始聊天了</div>
                    <div :class="m.user ==myname ? 'send' : 'recv' " v-for="m in msgs">
                        <div class="fimg">
                            <img :src="m.img" style="
                                width: 50px;
                                height: 50px;
                                border-radius: 50%; /* 将图片的边框半径设置为 50%，使其显示为圆形 */
                                object-fit: cover; /* 保持图片在圆形区域内完全显示 */
                                background-color: rgb(28, 81, 129);
                                margin-right: 15px;"/>
                        </div>
                        <!--                        <label class="user">{{m.user}}</label>-->
                        <span class="msg">{{m.msg}}</span>
                    </div>
                </div>
                <textarea
                        id="msg"
                        placeholder="Ctrl + Center 发送"
                        style="font-size: 30px;"
                        v-model="mymsg"
                ></textarea>
                <el-button @click="send" type="primary">发送</el-button>
            </div>
        </el-container>
    </div>
</div>
</body>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            mymsg: '',
            myname: '',
            msgs: [],
            online: [],
            friendname: '',
            ws: null,
            talkmsg: {
                sendid: '',
                receiveid: '',
                message: '',
            }
        },
        created() {
            const url = new URL(window.location.href);
            // 从 URL 中获取 'id' 参数
            const name = url.searchParams.get('name');
            const receiveid = url.searchParams.get('id');
            // 打印 'id' 参数
            this.talkmsg.receiveid = receiveid;
            console.log(receiveid);
            this.friendname = name;
            let id = sessionStorage.getItem("userid");
            let username = sessionStorage.getItem("username");
            this.myname = username;
            this.ws = new WebSocket("ws://127.0.0.1:8003/talk/" + id);
            this.ws.onopen = (ev) => {
                console.info("open", ev);
            }
            this.ws.onclose = (ev) => {
                console.info("close", ev);
            }
            //接收响应
            this.ws.onmessage = (ev) => {
                console.info("onmessage", ev);
                var obj = JSON.parse(ev.data);
                // String onlineUser; // 上线用户
                // String downlineUser; // 下线用户
                // String sendUser;     // 发送消息的用户
                // String sendMsg;     // 发送的消息
                if (obj.onlineUser) {
                    this.online.push(obj.onlineUser);
                }
                if (obj.downlineUser) {
                    // 过滤法移除下线用户
                    this.online.filter(user => user != obj.downlineUser);
                    console.info(this.online);
                }
                if (obj.sendMsg) {
                    if (obj.sendMsg.indexOf("img:") == 0) {
                        // 图片消息
                        let url = obj.sendMsg.substring(4);
                        // 重新设置消息
                        obj.sendMsg = `<img src="${url}" style="max-width: 200px">`;
                    }
                    this.msgs.push({
                        img: obj.sendUser.avatarUrl,
                        user: obj.sendUser.username,
                        msg: obj.sendMsg,
                    })
                }
            }
            // axios.get("user/user/selectById?id=" + id).then(res => {
            //     if (res.data.code == 1) {
            //         this.friend = res.data.data;
            //     }
            // });
            let p = new URLSearchParams();
            p.append("receiveid", receiveid);
            p.append("senderid", id);
            axios.post("chat/chat/getMsgRecord",p).then(res => {
                if (res.data.code == 1) {
                    res.data.data.forEach(msg =>{
                        this.msgs.push({
                            img:msg.senderimg,
                            user:msg.sendername,
                            msg:msg.message
                        })
                    })
                }
            })
        },
        methods: {
            send() {
                if (!this.mymsg) {
                    alert('请输入消息');
                }
                this.talkmsg.sendid = sessionStorage.getItem("userid");
                const msg = {
                    // String type;        //私聊or群聊
                    // User sendUser;     // 发送消息的用户
                    // User acceptUser; //接收消息的用户
                    // String sendMsg;     // 发送的消息
                    type: "private", // 私聊类型
                    sendUser: {id: this.talkmsg.sendid}, // 发送者信息
                    acceptUser: {id: this.talkmsg.receiveid}, // 接收者信息
                    sendMsg: this.mymsg
                };
                this.ws.send(JSON.stringify(msg)); // 发送消息

                // msgInput.value = ""; // 清空输入框\

                // this.ws.send(this.mymsg);
                this.talkmsg.message = this.mymsg;
                console.log(this.talkmsg);
                axios.post("chat/chat/savemsg", this.talkmsg).then(res => {
                    //这里可以做敏感词过滤
                    this.mymsg='';
                })
            }
        },
    });
</script>
</html>
